<template>
	<el-container>
		<el-aside width="200px">
			<el-container>
				<el-header>
					<el-input
						placeholder="输入关键字进行过滤"
						v-model="groupFilterText"
						clearable
					></el-input>
				</el-header>
				<el-main class="nopadding">
					<el-tree
						ref="group"
						class="menu"
						node-key="projectId"
						:data="groupData"
						:current-node-key="''"
						:highlight-current="true"
						:expand-on-click-node="false"
						:filter-node-method="groupFilterNode"
						@node-click="groupClick"
					></el-tree>
				</el-main>
			</el-container>
		</el-aside>
		<el-container>
			<el-header>
				<div class="left-panel">
					<el-button type="primary" icon="el-icon-plus"></el-button>
					<el-button
						type="danger"
						plain
						icon="el-icon-delete"
					></el-button>
				</div>
				<div class="right-panel">
					<div class="right-panel-search">
						<el-input
							v-model="search.keyword"
							placeholder="关键词"
							clearable
						></el-input>
						<el-button
							type="primary"
							icon="el-icon-search"
							@click="upsearch"
						></el-button>
					</div>
				</div>
			</el-header>
			<el-main class="nopadding">
				<scTable ref="table" :apiObj="list.apiObj" row-key="id" stripe>
					<el-table-column
						type="selection"
						width="50"
					></el-table-column>
					<el-table-column
						label="姓名"
						prop="name"
						width="150"
					></el-table-column>
					<el-table-column
						label="性别"
						prop="sex"
						width="150"
					></el-table-column>
					<el-table-column
						label="邮箱"
						prop="email"
						width="250"
					></el-table-column>
					<el-table-column
						label="评分"
						prop="num"
						width="150"
					></el-table-column>
					<el-table-column
						label="注册时间"
						prop="datetime"
						width="150"
						sortable
					></el-table-column>
					<el-table-column
						label="操作"
						fixed="right"
						align="right"
						width="160"
					>
						<template #default>
							<el-button-group>
								<el-button text type="primary" size="small"
									>查看</el-button
								>
								<el-button text type="primary" size="small"
									>编辑</el-button
								>
								<el-button text type="primary" size="small"
									>删除</el-button
								>
							</el-button-group>
						</template>
					</el-table-column>
				</scTable>
			</el-main>
		</el-container>
	</el-container>
</template>

<script>
export default {
	name: "listTree",
	data() {
		return {
			groupFilterText: "",
			groupData: [
				{
					projectId: "",
					label: "所有",
				},
				{
					projectId: "1",
					label: "华东总部",
					children: [
						{
							projectId: "11",
							label: "售前客服部",
						},
						{
							projectId: "12",
							label: "技术研发部",
						},
						{
							projectId: "13",
							label: "行政人事部",
						},
					],
				},
				{
					id: "2",
					label: "华难总部",
					children: [
						{
							id: "21",
							label: "售前客服部",
						},
						{
							id: "22",
							label: "技术研发部",
						},
					],
				},
			],
			list: {
				apiObj: this.$API.demo.list,
			},
			search: {
				keyword: "",
			},
		};
	},
	watch: {
		groupFilterText(val) {
			this.$refs.group.filter(val);
		},
	},
	mounted() {
		this.getProjectTree();
	},
	methods: {
		async getProjectTree() {
			await this.$API.system.menu.myMenus.get();
		},
		//树过滤
		groupFilterNode(value, data) {
			if (!value) return true;
			return data.label.indexOf(value) !== -1;
		},
		//树点击事件
		groupClick(data) {
			var params = {
				groupId: data.projectId,
			};
			this.$refs.table.reload(params);
		},
		//搜索
		upsearch() {
			this.$refs.table.upData(this.search);
		},
	},
};
</script>

<style></style>
